﻿<script setup lang="ts" name="Clipboard">
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
import { errorMessage, successMessage } from '@/utils/message'
import useCopyToClipboard from '@/hooks/copyToClipboard'
const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)
const { copyToClipboard } = useCopyToClipboard()
const { clipboardRef, copiedRef } = copyToClipboard()
const copyValue = ref('<span style="color: red;">可复制文本/HTML</span>')
const clipboardValue = ref('')
const handleCopy = () => {
  const value = unref(copyValue)
  if (!value) {
    errorMessage('请输入要拷贝的内容！')
    return
  }
  clipboardRef.value = value
  if (unref(copiedRef)) {
    successMessage('复制成功！')
  }
}
</script>

<template>
  <el-space :size="systemConfig.space" fill direction="vertical">
    <el-card shadow="never" class="no-border no-radius">
      <el-input type="textarea" resize="none" v-model="copyValue" />
      <el-button type="primary" @click="handleCopy">复制内容</el-button>
      <el-input type="textarea" resize="none" v-model="clipboardValue" placeholder="粘贴到此处" />
    </el-card>
  </el-space>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.no-border {
  border: none;
}

.no-radius {
  border-radius: 0;
}

.el-card {
  display: flex;

  :deep(.el-card__body) {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    .el-button {
      margin: 0 var(--el-space);
    }

    .el-textarea {
      height: 100%;

      .el-textarea__inner {
        height: 100%;
      }
    }
  }
}
</style>
